<template>
	<div class="vedio-boader">
		<div class="nav-head"><router-link to="/vedio"><img src="../../../../assets/icon-return45.png"></router-link><div class="title">视频榜单</div></div>
		<div class="top-blank"></div>
		<div class="boader-wraper">
			<div class="boader-nav">
				<span>总榜单</span>
				<span>内地</span>
				<span>港台</span>
				<span>欧美</span>
				<span>韩国</span>
				<span>日本</span>
			</div>
			<div class="haibao"><img src="../../../../assets/bangdan-pic.png"></div>
			<div class="boader-list">
				<h2>最新<img src="../../../../assets/icon-next32.png"></h2>
				<div class="boader-vedio-list">
					<div><img src="../../../../assets/vedio-pic1.png" class="pic1"><img src="../../../../assets/icon-stop45.png" class="pic2"><p>下雨了-薛之谦下雨了-薛之谦下雨了-薛之谦</p></div>
					<div class="mr0"><img src="../../../../assets/vedio-pic2.png" class="pic1"><img src="../../../../assets/icon-stop45.png" class="pic2"><p>下雨了-薛之谦</p></div>
					<div><img src="../../../../assets/vedio-pic1.png" class="pic1"><img src="../../../../assets/icon-stop45.png" class="pic2"><p>下雨了-薛之谦下雨了-薛之谦下雨了-薛之谦</p></div>
					<div class="mr0"><img src="../../../../assets/vedio-pic2.png" class="pic1"><img src="../../../../assets/icon-stop45.png" class="pic2"><p>下雨了-薛之谦</p></div>
					<div><img src="../../../../assets/vedio-pic1.png" class="pic1"><img src="../../../../assets/icon-stop45.png" class="pic2"><p>下雨了-薛之谦下雨了-薛之谦下雨了-薛之谦</p></div>
					<div class="mr0"><img src="../../../../assets/vedio-pic2.png" class="pic1"><img src="../../../../assets/icon-stop45.png" class="pic2"><p>下雨了-薛之谦</p></div>
				</div>
			</div>
		</div>
		<div class="blank"></div>
		<!-- <musicPlayer></musicPlayer> -->
	</div>
</template>
<script>
	import musicPlayer from '../../../../components/music_player'
	export default{
		name:"vedioBoader",
		data(){
			return{

			}
		},
		components:{
			musicPlayer
		}
	}
</script>
<style scoped lang="less">
.top-blank{
	width: 100%;
	height: 88 / 100rem;
}
.blank{
	width: 100%;
	height: 108 / 100rem;
}
.nav-head{
	width: 100%;
	height: 88/100rem;
	background:url('../../../../assets/daohang.png');
	background-size: 100%;
	overflow: hidden;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999;
}
.nav-head img{
	display: block;
	width: 27/100rem;
	height: 45/100rem;
	position: absolute;
	left: 20/100rem;
	top: 21.5/100rem;
}
.nav-head .title{
	width: 100%;
	height: 100%;
	text-align: center;
	font-size: 36/100rem;
	color: #fff;
	line-height: 88/100rem;
}
.boader-wraper{
	width: 100%;
	.boader-nav{
		display: flex;
		span{
			flex:1;
			text-indent: 20 / 100rem;
			display: block;
			padding-top: 28 / 100rem;
			padding-bottom: 28 / 100rem;
			font-size: 30 / 100rem;
		}
	}
	.haibao{
		width: 100%;
		height: 348 / 100rem;
		img{
			width: 100%;
			height: 100%;
		}
	}
	.boader-list{
		width: 100%;
		position: relative;
		h2{
			font-size: 30 / 100rem;
			margin:32 / 100rem  0  28 / 100rem   20 / 100rem;
			img{
				width: 19 / 100rem;
				position: absolute;
				top:0;
				right: 20 / 100rem;
			}
		}
		.boader-vedio-list{
			overflow: hidden;
			width: 100%;
			div{
				float: left;
				width: 370 / 100rem;
				margin-right: 10 / 100rem;
				margin-bottom: 25 / 100rem;
				position: relative;
				.pic1{
					width: 100%;
				}
				p{
					margin-top: 10 / 100rem;
					margin-left: 10 / 100rem;
				}
				.pic2{
					position: absolute;
					right: 10 / 100rem;
					top: 165 / 100rem;
					width: 45 / 100rem;
				}
			}
			.mr0{
				margin-right: 0;
			}
		}
	}
}
</style>